<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>曹耀东简历</title>
    <link rel="shortcut icon" href="./favicon.ico">
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./fonts/iconfont.css">
    <script src="./lib/index.js"></script>
</head>

<body>
    <!-- home -->
    <header id="home">
        <!-- 导航 -->
        <div id="nav">
            <div class="logo">
                <h3>SUPER</h3>&nbsp;
                <span class="nav-text">CAO</span>
            </div>
            <!--宽屏-->
            <ul class="links">
                <li>
                    <a href="javascript:;" class="home">
                        <span class="iconfont icon-shouye1-copy"></span> Home
                    </a>
                </li>
                <li>

                    <a href="javascript:;" class="about">
                        <span class="iconfont icon-yonghu-fuben"></span> About
                    </a>
                </li>
                <li>

                    <a href="javascript:;" class="skills">
                        <span class="iconfont icon-2"></span> Skills
                    </a>
                </li>
                <li>

                    <a href="javascript:;" class="projects">
                        <span class="iconfont icon-xiangmu"></span> Projects
                    </a>
                </li>
                <li>

                    <a href="#resume">
                        <span class="iconfont icon-gongju"></span> Resume
                    </a>
                </li>
            </ul>
            <!-- 菜单按钮 -->
            <div class="hamburger-menu">
                <div id="line1"></div>
                <div id="line2"></div>
                <div id="line3"></div>
            </div>
        </div>
        <!-- 主体区域 -->
        <div class="hero">
            <div class="picture">
                <img src="./img/picture.jpg" alt="">
            </div>
            <h1 class="h1">
                Hi,I'm a
                <span id="ityped" class="ityped content"></span>
            </h1>
            <p>不断规划与寻找自己的人生，保持热爱，永远积极向上。</p>
            <div class="hero-btns">
                <a href="javascript:;" class="about-btn">About me</a>
                <a href="javascript:;" class="projects-btn">Projects</a>
            </div>
        </div>
        <!-- 窄屏 -->
        <ul class="links-active">
            <li>
                <a href="javascript:;" class="home1">
                    <span class="iconfont icon-shouye1-copy"></span> Home
                </a>
            </li>
            <li>

                <a href="javascript:;" class="about1">
                    <span class="iconfont icon-yonghu-fuben"></span> About
                </a>
            </li>
            <li>

                <a href="javascript:;" class="skills1">
                    <span class="iconfont icon-2"></span> Skills
                </a>
            </li>
            <li>

                <a href="javascript:;" class="projects1">
                    <span class="iconfont icon-xiangmu"></span> Projects
                </a>
            </li>
            <li>

                <a href="#resume">
                    <span class="iconfont icon-gongju"></span> Resume
                </a>
            </li>
        </ul>
        <!-- 联系我 -->
        <div class="call-me">
            <div class="close-btns">
                <span></span>
                <span></span>
            </div>
            <div class="contact-me">
                <h2>联系方式</h2>
                <div class="number">
                    <div class="contact-title">手机号：</div>
                    <div class="contact-con">13476657475</div>
                </div>
                <div class="email">
                    <div class="contact-title">邮箱</div>
                    <div class="contact-con">caoxudong_super@126.com</div>
                    <div class="contact-con">2498032525@qq.com</div>
                </div>
                <div class="wechat">
                    <img src="./img/wecha.jpg" alt="">
                </div>
            </div>
        </div>
        <div class="callBtn">
            联系我
            <svg t="1618824731333" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2082" width="200" height="200" fill="#fff"><path d="M890.666667 213.333333h-768a85.333333 85.333333 0 0 0-85.333334 85.333334v426.666666a85.333333 85.333333 0 0 0 85.333334 85.333334h768a85.333333 85.333333 0 0 0 85.333333-85.333334V298.666667a85.333333 85.333333 0 0 0-85.333333-85.333334z m21.333333 85.333334v400.277333l-201.066667-219.733333 200.490667-183.445334c0.128 0.981333 0.576 1.877333 0.576 2.901334z m-810.090667-2.901334l200.490667 183.445334-201.066667 219.733333V298.666667c0-1.024 0.448-1.898667 0.576-2.901334z m419.157334 270.442667c-5.056 4.629333-10.624 5.589333-14.4 5.589333s-9.344-0.96-14.4-5.589333L176.576 277.333333h660.16L521.066667 566.208z m-171.456-43.797333l99.456 91.008c16.298667 14.912 36.949333 22.378667 57.6 22.378666s41.301333-7.466667 57.6-22.378666l99.434666-90.986667L868.906667 746.666667H144.426667l205.184-224.256z" fill="#000000" p-id="2083"></path></svg>
        </div>
    </header>

    <!-- about -->
    <section id="about">
        <div class="content-about">
            <h2><span>About</span>&nbsp;Me</h2>
            <div class="about-main">
                <div class="about-me">
                    <h3>hi！我是Jack Cao 很高兴在这里这遇到你</h3>
                    <p>
                        在大学里，有一次我在图书馆看到一本关于html的书，大概就是介绍如何让零基础的学生去学习。带着很好奇的心情，我模仿起书本里的代码，在电脑中的记事本上输入"Hello world!" 然后保存为.html文件在浏览器中打开，这一次的尝试让我走进了web前端的世界。 对于很喜欢设计的我，对于不依赖于任何设计软件，只需要输入字母，就可以设计出自己想要的页面，并且还可以与使用者进行交互式操作，我感到非常的兴奋。所以我就将web前端作为自己今后的发展方向，并不断的去学习，去优化自己所掌握的知识,让自己在学习的道路上越走越远。
                    </p>
                </div>
                <div class="education">
                    <h3>教育经历</h3>
                    <p>
                        <i>学校：</i>武汉生物工程学院<br>
                        <i>学历：</i>本科<br>
                        <i>专业：</i>信息管理与信息系统
                    </p>
                </div>

                <div class="hobbies">
                    <h3>My hobbyies</h3>
                    <div class="hobbies-con">
                        <span>coffe</span>
                        <p>在大学期间学习之余，通过勤工助学的方式入职武汉星巴克，并在期间学习并掌握了各项咖啡知识与咖啡的制作，成为了一名黑围裙咖啡师</p>
                        <span>羽毛球</span>
                        <p>从大学一年级开始，将羽毛球作为为个人长期运动，它不仅能使我保持健康的体魄，还能使我保持愉快的心情。在星巴克勤工助学期间代表武汉区参加了星巴克中西区羽毛球公开赛，并荣获男子双打第二名</p>
                        <span>骑行</span>
                        <p>大学期间，加入学校自行车社团，负责组织车队活动路线，以及车队骑行安全。多次骑行往返学校(武汉)和家里(黄冈)，单程180KM，骑行让我敢于不断去挑战自己的极限，以及不轻言放弃的精神</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="about-img">
            <img src="./img/about.svg" alt="">
        </div>
    </section>

    <!-- skills -->
    <section id="skills">
        <div class="skill-text">
            <h2>My&nbsp;<span>skill</span></h2>
        </div>
        <div class="skill-content">
            <div class="languages">
                <div class="skill-icon">
                    <span class="iconfont icon-ai-code"></span>
                </div>
                <h3 class="skill-h3">Languages</h3>
                <div class="skill-con">
                    <div>
                        HTML
                        <span></span>
                    </div>
                    <div>
                        CSS
                        <span></span>
                    </div>
                    <div>
                        JavaScript
                        <span></span>
                    </div>
                </div>
            </div>
            <div class="learning">
                <div class="skill-icon">
                    <span class="iconfont icon-zhishi"></span>
                </div>
                <h3 class="skill-h3">Learning</h3>
                <div class="skill-con">
                    <div>
                        Vue.js
                        <span></span>
                    </div>
                    <div>
                        Node.js/Express
                        <span></span>
                    </div>
                    <div>
                        jQuery
                        <span></span>
                    </div>
                </div>
            </div>
            <div class="technologies">
                <div class="skill-icon">
                    <span class="iconfont icon-2"></span>
                </div>
                <h3 class="skill-h3">Learning</h3>
                <div class="skill-con">
                    <div>
                        Git
                        <span></span>
                    </div>
                    <div>
                        Webpack
                        <span></span>
                    </div>
                    <div>
                        Gulp
                        <span></span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- projects -->
    <section id="projects">
        <div class="projects-text">
            <h2>My&nbsp;<span>Projects</span></h2>
        </div>
        <div class="projects-content">
            <div class="shopping cart">
                <div class="cart-img">
                    <img src="./img/mall.jpg" alt="">
                </div>
                <h2 class="cart-name">手机端购物商城</h2>
                <p class="cart-message">
                    项目使用vue框架搭建,vue-router实现路由跳转,axios请求后台数据,实现了精品商品轮播图展示,下拉加载商品，商品的详情页展示，商品加入购物车结算
                </p>
                <p class="cart-skill">vue/vue-router/axios</p>
                <div class="cart-btns">
                    <a href="javascript:;">
                        <span class="iconfont icon-yanjing"></span>
                    </a>
                    <a href="https://gitee.com/xiaoqiang-under-hawthorn/vue-supermall" target="_blank">
                        <span class="iconfont icon-ai-code"></span>
                    </a>
                </div>
            </div>
            <div class="company cart">
                <div class="cart-img vue-shop"><img src="./img/vue_shop.png" alt=""></div>
                <h2 class="cart-name">电商后台管理系统</h2>
                <p class="cart-message">
                    项目使用vue框架，以及vue-router构建，采取了前后端分离的开发模式，项目采用vuex处理各组件间的通讯，使用Element-ui组件库中部分功能进行快速开发，通过vue-cli 快速搭建开发环境。
                </p>
                <p class="cart-skill">vue+Element-ui</p>
                <div class="cart-btns">
                    <a href="javascript:;">
                        <span class="iconfont icon-yanjing"></span>
                    </a>
                    <a href="https://gitee.com/xiaoqiang-under-hawthorn/vue_shop" target="_blank">
                        <span class="iconfont icon-ai-code"></span>
                    </a>
                </div>
            </div>
            <div class="todolist cart">
                <div class="cart-img">
                    <img src="./img/todolist.jpg" alt="">
                </div>
                <h2 class="cart-name">To Do List</h2>
                <p class="cart-message">
                    利用html5本地存储特性，将用户输入的代办事项数据存储在用户浏览器中，只有当用户手动删除 数据，数据才会被销毁，否则会一直存在。
                </p>
                <p class="cart-skill">html5+css3+jQuery</p>
                <div class="cart-btns">
                    <a href="http://xiaoqiang-under-hawthorn.gitee.io/to-do-list/" target="_blank">
                        <span class="iconfont icon-yanjing"></span>
                    </a>
                    <a href="https://gitee.com/xiaoqiang-under-hawthorn/to-do-list" target="_blank">
                        <span class="iconfont icon-ai-code"></span>
                    </a>
                </div>
            </div>
            <div class="blog cart">
                <div class="cart-img">
                    <img src="./img/blog.jpg" alt="">
                </div>
                <h2 class="cart-name">个人网站</h2>
                <p class="cart-message">
                    个人简历项目，利用rem和js技术实现适配所有的屏幕，页面具有响应式，完成了域名以及云服务器的部署，以及项目的上线。
                </p>
                <p class="cart-skill">html5/css3/js</p>
                <div class="cart-btns">
                    <a href="javascript:;">
                        <span class="iconfont icon-yanjing"></span>
                    </a>
                    <a href="javascript:;">
                        <span class="iconfont icon-ai-code"></span>
                    </a>
                </div>
            </div>
        </div>
    </section>

    <!-- resume -->
    <footer id="resume">
        <h2><span class="iconfont icon-xingxing" id="xing-icon"></span>My&nbsp;<span class="resume-text">Resume</span><span class="iconfont icon-xingxing" id="xing-icon"></span>
        </h2>
        <a href="/lib/caoyaodong.pdf" target="_blank" class="dowuload">Download
            <svg t="1618644614278" class="icon" viewBox="0 0 1000 1000" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2011" width="200" height="200"><path d="M227.986 584.688l257.492 257.492c20.11 20.11 52.709 20.11 72.819 0l257.492-257.492c20.11-20.11 20.11-52.709 0-72.819s-52.709-20.11-72.819 0l-169.585 169.585v-493.664c0-28.453-23.046-51.499-51.499-51.499s-51.499 23.046-51.499 51.499v493.664l-169.585-169.585c-10.042-10.043-23.226-15.089-36.41-15.089s-26.367 5.021-36.41 15.089c-20.11 20.11-20.11 52.709 0 72.819z" p-id="2012"></path></svg>
        </a>
    </footer>
    <div class="BackTop">
        <span class="iconfont icon-jiantoushangsheng"></span>
    </div>

    <script src="./js/flexible.js"></script>
    <script src="./js/index.js"></script>
</body>

</html>